<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 使用自定义全局组件 -->
        <mybtn></mybtn>
    </div>
</body>


<template id="mybtn">
    <button @click="count++">点击增加 {{count}}</button>
</template>

<script>
    const app = Vue.createApp({
        data() {
            return {}
        },
        methods: {},
    })

    // 注册全局组件
    // 两个参数
    // 1. 组件名称
    // 2. 组件的描述(组件的选项) 
    app.component('mybtn', {
        template: '#mybtn',
        data() {
            return {
                count: 100
            }
        },
    })

    const vm = app.mount('#app')

    /*
        注册局部组件的时候，需要在组件选项中通过 components 进行注册(只能在当前组件使用)
        注册全局组件的时候，需要使用 app.component 进行注册(在整个项目中使用)
    */
</script>

</html>